<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="detail of details" :key="detail.id">
                {{detail.id}} - {{detail.title}} - {{detail.createTime}} - {{detail.price | money}} - {{detail.status | detailStatu }}
            </li>
        </ul>
    </div>
    <script src="../libs/vue/Vue.min.js"></script>
    <script>
        const detailStatus = {
            '0': '未付款',
            '1': '已付款',
            '2': '待付款',
            '3': '待收货',
        }
        new Vue({
            el: '#app',
            data: {
                details: [{
                    id: "壹",
                    status: 0,
                    price: "5500",
                    title: 'asdasdasd',
                    createTime: '2019/09/03 12:17:25'
                }, {
                    id: "贰",
                    status: 1,
                    price: 3999,
                    title: 'asgsdgrgasd',

                    createTime: '2001/09/03 12:17:25'
                }, {
                    id: "叁",
                    status: 2,
                    price: "1999",
                    title: 'asasdasdasd',

                    createTime: '20220/12/03 12:17:25'
                }, {
                    id: "肆",
                    status: 3,
                    price: "899",
                    title: 'asdgyyjd',

                    createTime: '2019/11/23 12:17:25'
                }]
            },
            filters: {
                detailStatu(val) {
                    return detailStatus[val]
                },
                money(val) {
                    return Number(val).toFixed(2)
                }
            }
        })
    </script>
</body>

</html>